<html>
  <head>
    <meta charset="utf-8">
    <title>上传下载文件</title>
  </head>
  <script type="text/javascript" src="./js/jquery3.4.1.js"></script>
  <script type="text/javascript" src="./js/qrcode.js"></script>
  <script type="text/javascript" src="./js/qrcode.min.js"></script>
  <style>
    body{
      margin: 0 auto;
      padding: 0 auto;
    }
    [hidden]{
      display: none;
    }
    #drag{
      background: #d1ecf5e6;
      width: 80%;
      height: 50%;
      /* border:1px dashed #000; */
      position:absolute;
      top: 25%;
      left: 10%;
      /* margin:-150px 0 0 -150px; */
      text-align:center;
      font:20px/300px '微软雅黑';
    }
    #qrcode{
      position: fixed;
      right: 40px;
      bottom: 10px;
      color: #85ddd1;
      z-index: -1;
    }
    #qrcode img{
      width: 150px;
    }
    #shoukuan{
      z-index: -1;
      position: fixed;
      top: 40%;
      left: 10px;
      display: none;
    }
    #shoukuan img{
      width: 130px;
      display: block;
      border-radius: 4px;
    }
    #main{
      width:60%;
      height:20%;
      margin-left: 20%;
    }
    #main > div{
      width:40%;
      float: left;
      margin-left: 50px;
    }
    .btn{
      width: 120px;
      height: 25px;
      border-radius: 4px;
      color: #fff;
      border: 0.1rem solid ;
      border-color:#7F00FF ;
      font-size: 14px;
      text-align: center;
      padding-top: 3px;
    }
    .btn_upload{
      overflow: hidden;
      position: relative;
      background: skyblue;
    }
    .btn_upload:hover{
      cursor: pointer;
    }
    #file{
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    .btn_upload span{
      display: inline-block;
    }
    .submit{
      background: skyblue;
    }
    #jindu{
      margin-top: 10px;
      height: 40px;
      width: 100%;
    }
    #jindukuang{
      width: 90%;
      height:6px;
      border-radius: 4px;
      border: 1px solid #000;
      background: #fff;
    }
    #jindutiao{
      display: inline-block;
      width: 0%;
      height:6px;
      border-radius: 4px;
      background: #51e351;
    }
    .xuanze .btn{
      float: left;
      margin-right: 10px;
    }
    form{
      height: 30px;
      width: 400px;
    }
    .baifenbi{
      margin-left: 0%;
    }
    .wenben{
      clear: both;
      margin-top: 10px;
      display: block;
    }
    .wenbenyu{
      width: 400px;
    }
    .setVal, .clearVal{
      display: inline-block;
      margin-top: 10px;
      background: #6df7dc;
      color:#19119b;
      cursor: pointer;
    }
    .setMsg, .fileMsg{
      color: #a9a6a6;
    }
    .wenjianliebiao{
      width: 400px;
    }
    .wenjianliebiao table{
      width: 400px;
    }
    .wenjianliebiao table tr{
      background: #8dc5fd;
    }
    .wenjianliebiao table tr:nth-child(1), .wenjianliebiao caption{
      background: #f7f0f0;
    }
    .wenjianliebiao table td:nth-child(1){
      display: inline-block;
      width:300px;
    }
    .wenjianliebiao table td:nth-child(1) span{
      width: 100%;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wenjianliebiao table td:nth-child(2){
      width: 100px;
    }
    .yishangchuanliebiao{
      margin-top: 10px;
      width: 400px;
    }
    .yishangchuanliebiao table{
      width: 400px;
    }
    .yishangchuanliebiao table tr:nth-child(even){
      background: #d6f2fd;
    }
    .yishangchuanliebiao table tr:nth-child(odd){
      background: #e4fff0;
    }
    .yishangchuanliebiao table tr:nth-child(1), .yishangchuanliebiao caption{
      background: #6df7dc;
    }
    .yishangchuanliebiao table td:nth-child(1){
      display: inline-block;
      width:300px;
    }
    .yishangchuanliebiao table td:nth-child(1) span{
      width: 100%;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .yishangchuanliebiao table td:nth-child(2){
      width: 100px;
    }
    .yishangchuanliebiao a{
      text-decoration: none;
      color: #2086db;
    }
  </style>
  <body>
    <div id="drag" hidden>请将文件拖拽到此区域</div>
    <div id="qrcode">局域网扫码连接</div>
    <div id="shoukuan" title="支持一下">
      <img src="./images/zhifubao.jpg" title="支付宝">
      <img src="./images/weixin.png" title="微信">
    </div>
    <div id="main">
      <div>
        <!-- 进度条 -->
        <div id="jindu">
          <span class="baifenbi">0%</span>
          <div id="jindukuang">
            <span id="jindutiao"></span>
          </div>
        </div>
        <!-- 文件表单 -->
        <form>
          <div class="xuanze">
            <div class="btn btn_upload" title="选择文件">
              <input type="file" name="file[]"  id="file"  multiple="multiple">
              <span>+选择文件</span>
              <!-- 上传按钮隐藏 -->
            </div>
            <div onclick="upload()" class="btn submit">上传</div><span class="fileMsg"></span>
          </div>
          <input type="reset" class="reset" hidden>
        </form>
        <div class="wenben">
          <div class="wenbenyu">
            <textarea cols="40" rows="10" class="text"></textarea>
          </div>
            <div class="btn setVal">设置/复制文本</div>
            <div onclick="$('.text').val('');$('.setMsg').html('清空完成')" class="btn clearVal">清空文本</div>
            <span class="setMsg"></span>
        </div>
      </div>
      <div class="wenjianliebiao">
        <table>
          <caption>即将上传的文件(支持拖拽上传)</caption>
          <tbody class="liebiao">
            <tr>
              <td>名称</td>
              <td>大小</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="yishangchuanliebiao">
        <table>
          <caption>已上传的文件(6小时后自动删除)</caption>
          <tbody class="liebiao">
            <tr>
              <td>名称</td>
              <td>操作</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>
<script type="text/javascript">
  // 拖拽的文件
  var dragFile = null;

  $(':file').click(function(){
    reset();
    $('#jindutiao').css('width', "0%");
    $(".baifenbi").html("0%");
  })
  $(':file').change(function (){
      var file = this.files;
      console.log(file)
      let _tbody = '';
      $.each(file, function(k, v){
        _tbody += '<tr>';
          _tbody += '<td>' + v.name + '</td>';
          if (v.size/1024 > 1024) {
            _tbody += '<td>' + (v.size/1024/1024).toFixed(3) + 'MB</td>';
          } else {
            _tbody += '<td>' + (v.size/1024).toFixed(3) + 'KB</td>';
          }
        _tbody += '</tr>';
      });
      $('.wenjianliebiao .liebiao tr:gt(0)').remove();
      $('.wenjianliebiao .liebiao').append(_tbody)

      if (file.length > 50) {
        alert('单次最多上传50个文件');
        return false;
      }
      if (file.length > 0) {
        $('.btn_upload span').html('选择了' + file.length + '个文件');
        $('.fileMsg').html('')
      }
  });
  function upload(){
    var formData = new FormData();
    var file = $(':file')[0].files;
    if (dragFile !== null) {
      file = dragFile.files;
    }
    if (file.length <= 0) {
      $('.fileMsg').html('请选择文件')
      return false;
    }
    for (var i = file.length - 1; i >= 0; i--) {
      formData.append("file[" + i + "]", file[i]);
    }
    $.ajax({
        url: "./php/upload.php",
        type: "POST",
        data: formData,
        contentType: false, //必须false才会自动加上正确的Content-Type
        processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
        enctype: 'multipart/form-data',
        xhr: function () {
            //获取ajax中的ajaxSettings的xhr对象  为他的upload属性绑定progress事件的处理函数
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                //检查其属性upload是否存在
                myXhr.upload.addEventListener("progress", resultProgress, false);
            }
            return myXhr;
        },
        success: function (data) {
          data = JSON.parse(data);
          $('.fileMsg').html(data.msg)
          if (data.code == 0) {
            // $('.yishangchuanliebiao .liebiao').append();
            setPro(100)
            getFile();
            reset()
          }
          console.log(data)
        },
        error: function (data) {
          alert(JSON.stringify(data))
        }
    })
  }
  // 重置上传
  function reset(){
    dragFile = null;
    $('.btn_upload span').html('+选择文件');
    $('.reset').click();
    $('.wenjianliebiao .liebiao tr:gt(0)').remove();
  }
  //上传进度回调函数
  function resultProgress(e) {
      if (e.lengthComputable) {
          var percent = e.loaded / e.total * 100;
            console.log(percent)
          if (percent <= 99) {
            setPro(percent)
          } else {
            setPro(99.9)
          }
      }
  }
  // 设置进度条
  function setPro(percent) {
    $('#jindutiao').css('width', percent.toFixed(3) + "%");
    $(".baifenbi").html(percent.toFixed(1) + "%");
  }
  // 设置与复制
  $('.setVal').on('click',function(){
    let val = $('.text').val();
    $.ajax({
      'url': './php/setVal.php',
      'type': 'post',
      'data': {'text': val},
      'dataType':'json',
      success:function(result){
        if (result.code == '1')
        {
          $('.text').val(result.data)
          let copyVal=$('.text')[0];
          copyVal.select(); // 选择对象
          document.execCommand("Copy");
          $('.setMsg').html('复制成功');
        }
        else
        {
          $('.setMsg').html('设置成功');
        }
      }
    });
  })
  function getFile(){
    $.ajax({
      'url': './php/getFile.php',
      'type': 'get',
      'dataType':'json',
      success:function(result){
        let _tbody = '';
        $.each(result.data, function(k, v){
          _tbody += '<tr title="' + v + '">';
            _tbody += '<td><span>' + v + '</span></td>';
            _tbody += '<td><a href="./tmp/' + v + '" target="_blank">下载</a></td>';
          _tbody += '</tr>';
        });
        $('.yishangchuanliebiao .liebiao tr:gt(0)').remove();
        $('.yishangchuanliebiao .liebiao').append(_tbody)
      },
      error: function (data) {
        alert(JSON.stringify(data))
      }
    });
  }
  getFile();

  // 文件拖拽上传
  var drag = $('#drag')[0];
  var timer = null;
  document.ondragover = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
      drag.style.display = 'none';
    },200);
    drag.style.display = 'block';
  };
  //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
  drag.ondragenter = function(e){
    drag.innerHTML = '请释放鼠标';
  };
  drag.ondragover = function(){
    return false;
  };
  drag.ondragleave = function(){
    drag.innerHTML = '请将文件拖拽到此区域';
  };
  drag.ondrop = function(e){
    dragFile = e.dataTransfer;
    upload();
  };

   var reader = new FileReader();
   //读取成功
   reader.onload = function(){
    console.log(reader,1);
   };


  console.log('%c 不要再看Low B代码了~', 'color: red; font-style: italic; font-size: 24px;font-weight: bold;text-decoration: underline;');
  // 生成当前链接二维码
  new QRCode(document.getElementById("qrcode"), window.location.href);
  setTimeout("$('#shoukuan').show()",30000)
  // 屏蔽浏览器自动打开
  document.addEventListener('drop', function (e) {
    e.preventDefault()
  }, false)
  document.addEventListener('dragover', function (e) {
    e.preventDefault()
  }, false)
  
   // 检测设备类型的函数
        function detectDevice() {
            // 移动设备检测正则表达式
            const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
            
            // 检测用户代理
            const isMobile = mobileRegex.test(navigator.userAgent);
            
            // 根据设备类型跳转
            if (isMobile) {
                // 移动端跳转到手机版页面
                window.location.href = 'index_phone.html';
            } else {
                // 电脑端跳转到电脑版页面
                // window.location.href = 'index.html';
            }
        }
        
        // 页面加载完成后执行检测
        window.onload = detectDevice;
</script>